﻿@{
    ViewBag.Title = "CustomAnimationChain";
    Layout = "~/Views/Shared/_Page.cshtml";
}

<style>
	#box {
        border:3px double green;
        width: 50px;
        height: 50px;
        position:absolute;
        left:100px;
        top:150px;
        background-color: #008000;
	}
</style>

<h2>Custom Animation Chain</h2>

<input id="btnAnimate" type="button" value="Animate">
<input id="btnReset" type="button" value="Reset">

<br />
<br />
<div id="box"></div>

<script type="text/javascript">
    $(document).ready(function () {
        $("#btnAnimate").click(function () {
            $("#box").animate({ left: "+=300", opacity: 0.6 }, 2000, 'linear')
                .animate({ top: "+=200", opacity: 0.2 }, 2000, 'linear')
                .slideUp(1000)
                .slideDown(1000);
        });

        $("#btnReset").click(function () {
            location.reload();
        });
    });
</script>
